<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>要素信息</title>
    <link href="../../js/layui/css/layui.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .user {
            width: 100%;
            height: 100%;
            background: #001E3D;
        }

        .layui-tab-title {
            border-color: darkslategrey;
        }

        .layui-tab-title li {
            color: #FEFEFE;
            font-size: 20px;
        }

        .layui-tab-brief>.layui-tab-title .layui-this {
            color: #D02B31;
        }

        .layui-this:after {
            border-bottom: 1px solid #D02B31 !important;
        }

        .layui-tab {
            margin: 0;
        }

        .layui-btn {
            background-color: #2CB6F5;
            float: right;
            margin-right: 15px;
            border-radius: 3px;
            width: 55px;
        }

        .layui-btn-sm {
            line-height: 25px;
            height: 25px;
            margin-top: 7px;
        }

        .contant {
            width: 100%;
        }

        .user-self {
            height: 35px;
            background-color: #064789;
            padding-left: 30px;
            margin: 5px 2px 1px 7px;
        }

        .item {
            color: #FDFDFD;
            font-size: 14px;
            line-height: 35px;
        }

        .layui-btn-xs {
            margin-top: 7px;
            background-color: #0870E4;
        }

        #demo2,
        #demo2pro,
        #demo2build,
        #demo2other {
            float: right;
            margin-right: 70px;
        }

        .layui-laypage a,
        .layui-laypage span {
            height: 25px;
            line-height: 25px;
        }

        .addBox,
        .modBox {
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            width: 450px;
            background-color: rgb(230, 236, 238);
            height: 450px;
            display: none;
        }

        .btnClose,
        .modClose {
            color: #bbbbbb;
            font-size: 20px;
            float: right;
            padding: 10px;
            cursor: pointer;
        }

        .layui-upload {
            padding: 5px 10px;
        }

        .layui-upload button {
            float: none;
            width: 100px;
        }

        .add-hander {
            margin-left: 80px;
            margin-top: 35px;
        }

        .add-project,
        .add-title {
            margin-top: 10px;
            padding: 5px 10px;
        }

        .add-project span {
            margin-right: 20px;
        }

        .add-title span {
            margin-right: 20px;
        }

        .layui-form-label {
            margin-left: -17px;
            width: auto;
        }

        .layui-input-block {
            margin-left: 70px;
            width: 200px;
            min-height: 36px;
        }

        .addbtn {
            margin-right: 30px;
            margin-top: 20px;
        }

        .add-select,
        .mod-select {
            min-height: 36px;
            border-color: #D2D2D2 !important;
            padding-left: 10px;
            width: 100%;
        }

        .layui-input-block button {
            width: 88px;
            float: none;
            margin-right: 1px;
            color: #fff;
        }

        .layui-input-block input {
            line-height: 38px;
        }

        #test1,
        #test2,
        #test3,
        #test4,
        #test5,
        #test6 {
            padding-left: 0px;
        }

        .add-hander1 {
            height: 40px;
            background-color: black;
        }

        .addUser {
            float: left;
            margin: 10px;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 用户管理 -->
    <div class="user">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">地理位置及地形地貌</li>
                <li>项目功能及模块</li>
                <li>主要建筑组成及特性</li>
                <li>其他要素信息</li>
                <button type="button" class="layui-btn layui-btn-sm addbtn">添加</button>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <div class="contant"></div>
                    <div id="demo2"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="contantpro"></div>
                    <div id="demo2pro"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="contantbuild"></div>
                    <div id="demo2build"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="contantother"></div>
                    <div id="demo2other"></div>
                </div>
            </div>
        </div>

        <div class="addBox">
            <div class="add-hander1">
                <div class="addUser"><span>添加</span></div>
                <div class="btnClose">x</div>
            </div>
            <div class="add-hander">
                <form class="layui-form" action="" id="form1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <select name="title1" lay-verify="required" class="add-select">
                                <option value=""></option>
                                <option value="地理位置及地形地貌">地理位置及地形地貌</option>
                                <option value="项目功能及规模">项目功能及规模</option>
                                <option value="主要建筑物组成与特性">主要建筑物组成与特性</option>
                                <option value="其他要素信息">其他要素信息</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入项目名称"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传文档</label>
                        <div class="layui-input-block">
                            <input type="file" id="test1" name="file" placeholder="点击这里上传文档" autocomplete="off"
                                class="layui-input input-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传图片</label>
                        <div class="layui-input-block">
                            <input type="file" id="test2" name="file" placeholder="点击这里上传图片" autocomplete="off"
                                class="layui-input input-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传视频</label>
                        <div class="layui-input-block">
                            <input type="file" id="test3" name="file" placeholder="点击这里上传视频" autocomplete="off"
                                class="layui-input input-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
        <div class="modBox">
            <div class="add-hander1">
                <div class="addUser"><span>修改</span></div>
                <div class="modClose">x</div>
            </div>
            <div class="add-hander">
                <form class="layui-form" action="" id="form2">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <select name="title1" lay-verify="required" class="mod-select">
                                <option value=""></option>
                                <option value="地理位置及地形地貌">地理位置及地形地貌</option>
                                <option value="项目功能及规模">项目功能及规模</option>
                                <option value="主要建筑物组成与特性">主要建筑物组成与特性</option>
                                <option value="其他要素信息">其他要素信息</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" disabled autocomplete="off"
                                class="layui-input mod-title">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传文档</label>
                        <div class="layui-input-block">
                            <input type="file" id="test4" name="file" placeholder="点击这里上传文档" autocomplete="off"
                                class="layui-input input-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传图片</label>
                        <div class="layui-input-block">
                            <input type="file" id="test5" name="file" placeholder="点击这里上传图片" autocomplete="off"
                                class="layui-input input-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传视频</label>
                        <div class="layui-input-block">
                            <input type="file" id="test6" name="file" placeholder="点击这里上传视频" autocomplete="off"
                                class="layui-input input-file">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formmodify">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/menu.js"></script>
    <script src="../../config/config.js"></script>
    <script>

        //下载按钮
        // var formdata = new FormData();
        // formdata.append("title", "地理位置及地形地貌");
        // formdata.append("name", "杨家大山地区");
        // formdata.append("type", "文档");
        // var url = "http://localhost:31100/file/download?title=地理位置及地形地貌&name=杨家大山地区&type=文档";
        // window.location.href = url;
        // var username1 = window.localStorage.getItem('username');
        // if (username1 == null) {
        //     window.location.href = "http://localhost:5500/login.html";
        // }
        var objDate1 = [];
        var objDatePro = []
            , objDateBuild = []
            , objDateOther = [];
        var objDate = [];
        //地理位置及地形地貌
        function serarDate() {
            objDate1 = []
            $.ajax({
                type: "get",
                url: loginUrl + "/geography/getGeographyList",
                async: false,
                cache: false,
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var cas = {
                                id: data[i].id, name: data[i].name, title: data[i].title,
                                durl: data[i].durl, videourl: data[i].videourl, pictureurl: data[i].pictureurl
                            };
                            objDate1.push(cas);
                        }
                        renderDate('demo2', objDate1, 'contant')
                    }
                },
                error: function (e) {
                    alert("数据跑丢了");
                }
            });
        }
        serarDate()
        //项目功能
        function serarProject() {
            objDatePro = []
            $.ajax({
                type: "get",
                url: loginUrl + "/Project/getProjectList",
                async: false,
                cache: false,
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var cas = {
                                id: data[i].id, name: data[i].name, title: data[i].title,
                                durl: data[i].durl, videourl: data[i].videourl, pictureurl: data[i].pictureurl
                            };
                            objDatePro.push(cas);
                        }
                        renderDate('demo2pro', objDatePro, 'contantpro')
                    }
                },
                error: function (e) {
                    alert("数据跑丢了");
                }
            });
        }
        serarProject()
        //建筑特性
        function serarBuiding() {
            objDateBuild = []
            $.ajax({
                type: "get",
                url: loginUrl + "/Building/getBuildingList",
                async: false,
                cache: false,
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var cas = {
                                id: data[i].id, name: data[i].name, title: data[i].title,
                                durl: data[i].durl, videourl: data[i].videourl, pictureurl: data[i].pictureurl
                            };
                            objDateBuild.push(cas);
                        }
                        renderDate('demo2build', objDateBuild, 'contantbuild')
                    }
                },
                error: function (e) {
                    alert("数据跑丢了");
                }
            });
        }
        serarBuiding()
        //其他要素
        function serarOther() {
            objDateOther = []
            $.ajax({
                type: "get",
                url: loginUrl + "/Other/getOtherList",
                async: false,
                cache: false,
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var cas = {
                                id: data[i].id, name: data[i].name, title: data[i].title,
                                durl: data[i].durl, videourl: data[i].videourl, pictureurl: data[i].pictureurl
                            };
                            objDateOther.push(cas);
                        }
                        renderDate('demo2other', objDateOther, 'contantother')
                    }
                },
                error: function (e) {
                    alert("数据跑丢了");
                }
            });
        }
        serarOther()
        //弹出框
        function openMsg(msg1) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: '提示框'
                    , content: msg1
                    , type: 0
                    , offset: '150px'
                    , btnAlign: 'c'
                    , anim: 1
                });
            });
        }
        function checkImg(test) {
            var img_id = document.getElementById(test).value; //根据id得到值
            var index = img_id.lastIndexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
            img_id = img_id.substring(index).toLowerCase(); //截断"."之前的，得到后缀
            if (img_id != ".bmp" && img_id != ".png" && img_id != ".gif" && img_id != ".jpg" && img_id != ".jpeg") {  //根据后缀，判断是否符合图片格式
                openMsg("不是指定图片格式,重新选择")
                document.getElementById('test2').value = "";  // 不符合，就清除，重新选择
                return false
            }
            return true
        }
        //2、这个函数是，判断视频格式---------------------------------------------------------------
        function checkTv(test) {
            var tv_id = document.getElementById(test).value;//根据id得到值
            var index = tv_id.lastIndexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
            tv_id = tv_id.substring(index).toLowerCase(); //截断"."之前的，得到后缀
            if (tv_id != ".mp4" && tv_id != ".rmvb" && tv_id != ".avi" && tv_id != ".ts") { //根据后缀，判断是否符合视频格式
                openMsg("不是指定视频格式,重新选择")
                document.getElementById('test3').value = "";   // 不符合，就清除，重新选择
                return false
            }
            return true
        }
        //3、这个函数是，配对指定格式文件-----------------------------------------------------------
        function checkSeq(test) {
            var seq_id = document.getElementById(test).value; //根据id得到值
            var index = seq_id.lastIndexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
            seq_id = seq_id.substring(index).toLowerCase();  //截断"."之前的，得到后缀
            if (seq_id != ".doc" && seq_id != ".docx") {
                openMsg("不是指定文档格式,重新选择")                       //根据后缀，判断是否符合格式
                document.getElementById('test1').value = "";  // 不符合，就清除，重新选择
                return false
            }
            return true
        }

        //数据
        function renderDate(ele, data1, name) {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage,
                    layer = layui.layer;
                laypage.render({
                    elem: ele
                    , count: data1.length
                    , theme: '#1E9FFF'
                    , limit: 10
                    , jump: function (obj, first) {
                        document.getElementsByClassName(name)[0].innerHTML = function () {
                            var arr = [],
                                thisData = data1.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push(
                                    '<div class="user-self user-self1">' +
                                    '<span class="item">' + item.name + '...详情</span>' +
                                    '<button type="button" data-name="' + item.name + '" data-title="' + item.title + '" class="layui-btn layui-btn-xs modbtn">修改</button>' +
                                    '<button type="button" data-name="' + item.name + '" data-title="' + item.title + '" data-videourl="' + item.videourl + '" class="layui-btn layui-btn-xs btn-vidio">视频下载</button>' +
                                    '<button type="button" data-name="' + item.name + '" data-title="' + item.title + '" data-pictureurl="' + item.pictureurl + '" class="layui-btn layui-btn-xs btn-img">图片下载</button>' +
                                    '<button type="button" data-name="' + item.name + '" data-title="' + item.title + '" data-durl="' + item.durl + '" class="layui-btn layui-btn-xs btn-wd">文档下载</button>' +
                                    '</div>'
                                );
                            });
                            return arr.join('');
                        }();
                    }
                });
            })
        }
        layui.use(['laypage', 'layer', 'upload', 'form', 'element'], function () {
            var laypage = layui.laypage,
                layer = layui.layer;
            var $ = layui.jquery
                , upload = layui.upload
                , form = layui.form
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //监听提交
            form.on('submit(formDemo)', function (data) {

                var mydatad = document.getElementById("test1").files[0];
                var mydatai = document.getElementById("test2").files[0];
                var mydatav = document.getElementById("test3").files[0];
                var formdata = new FormData();
                // formdata.append("filename", "泰瑞需要提供的接口.docx");
                formdata.append("title", data.field.title1);
                formdata.append("name", data.field.title);
                var shows = true;
                objDate1.map(function (item) {
                    if (item.name == data.field.title) {
                        openMsg("用户名已存在");
                        shows = false;
                    }
                })
                objDatePro.map(function (item) {
                    if (item.name == data.field.title) {
                        openMsg("用户名已存在");
                        shows = false;
                    }
                })
                objDateBuild.map(function (item) {
                    if (item.name == data.field.title) {
                        openMsg("用户名已存在");
                        shows = false;
                    }
                })
                objDateOther.map(function (item) {
                    if (item.name == data.field.title) {
                        openMsg("用户名已存在");
                        shows = false;
                    }
                })
                if (mydatad !== undefined && mydatad !== null && mydatad !== "") {
                    if (!checkSeq("test1")) {
                        return false
                    }
                    formdata.append("text", mydatad);
                }
                if (mydatai !== undefined && mydatai !== null && mydatad !== "") {
                    if (!checkImg("test2")) {
                        return false
                    }
                    formdata.append("image", mydatai);
                }
                if (mydatav !== undefined && mydatav !== null && mydatad !== "") {
                    if (!checkTv("test3")) {
                        return false
                    }
                    formdata.append("video", mydatav);
                }
                if (!shows) {
                    return false;
                }

                $.ajax({
                    type: "post",
                    url: loginUrl + "/file/upload1",
                    data: formdata,
                    dataType: "text",
                    processData: false, // 告诉jQuery不要去处理发送的数据 
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头 
                    async: false,
                    success: function (data) {
                        serarDate()
                        serarProject()
                        serarBuiding()
                        serarOther()
                        $(".addBox").hide()
                    },
                    error: function (e) {
                        alert("数据跑丢了");
                    }
                });
                return false
            });

            //监听提交(修改)
            form.on('submit(formmodify)', function (data) {

                var mydatad = document.getElementById("test4").files[0];
                var mydatai = document.getElementById("test5").files[0];
                var mydatav = document.getElementById("test6").files[0];

                var formdata = new FormData();
                formdata.append("title", data.field.title1);
                formdata.append("name", data.field.title);
                if (mydatad !== undefined && mydatad !== null) {
                    if (!checkSeq("test4")) {
                        return false
                    }
                    formdata.append("text", mydatad);
                }
                if (mydatai !== undefined && mydatai !== null) {
                    if (!checkImg("test5")) {
                        return false
                    }
                    formdata.append("image", mydatai);
                }
                if (mydatav !== undefined && mydatav !== null) {
                    if (!checkTv("test6")) {
                        return false
                    }
                    formdata.append("video", mydatav);
                }

                $.ajax({
                    type: "post",
                    url: loginUrl + "/file/upload1",
                    data: formdata,
                    dataType: "text",
                    processData: false, // 告诉jQuery不要去处理发送的数据 
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头 
                    async: false,
                    success: function (data) {
                        serarDate()
                        serarProject()
                        serarBuiding()
                        serarOther()
                        $(".modBox").hide()
                    },
                    error: function (e) {
                        alert("数据跑丢了");
                    }
                });
                return false;
            });
        })
        //弹出窗关闭
        $(".btnClose").click(function () {
            $(".addBox").hide()
        })
        $(".modClose").click(function () {
            $(".modBox").hide()
        })
        //新增显示
        $(".addbtn").click(function () {
            document.getElementById("form1").reset();
            $(".addBox").show()
        })
        //修改显示
        $(document).on("click", ".modbtn", function () {
            document.getElementById("form2").reset();
            //1. 获取id值
            var mname = $(this).attr("data-name");
            var mtitle = $(this).attr("data-title");
            $(".mod-title").val(mname)
            var slect = 'dd[lay-value=' + mtitle + ']';
            $(".mod-select").siblings("div.layui-form-select").find(slect).click();
            $(".modBox").show()
        })

        //下载按钮
        function c_downLoad(name, title, type) {
            var formdata = new FormData();
            formdata.append("title", title);
            formdata.append("name", name);
            formdata.append("type", type);
            var url = loginUrl + '/file/download?title=' + title + '&name=' + name + '&type=' + type;
            window.location.href = encodeURI(url);
            // window.location.href = url;
        }
        $(document).on("click", ".btn-wd", function () {
            var dname = $(this).attr("data-name");
            var dtitle = $(this).attr("data-title");
            var ddurl = $(this).attr("data-durl");
            if (ddurl == "null") {
                openMsg("文档不存在")
            } else {
                c_downLoad(dname, dtitle, "文档")
            }

        })
        $(document).on("click", ".btn-img", function () {
            var dname = $(this).attr("data-name");
            var dtitle = $(this).attr("data-title");
            var dpictureurl = $(this).attr("data-pictureurl");
            if (dpictureurl == "null") {
                openMsg("图片不存在")
            } else {
                c_downLoad(dname, dtitle, "图片")
            }
        })
        $(document).on("click", ".btn-vidio", function () {
            var dname = $(this).attr("data-name");
            var dtitle = $(this).attr("data-title");
            var dvideourl = $(this).attr("data-videourl");
            if (dvideourl == "null") {
                openMsg("视频不存在")
            } else {
                c_downLoad(dname, dtitle, "视频")
            }

        })

        //创建菜单
        function muen() {
        }
    </script>
</body>

</html>